<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>最简单的例子</title>
    <script type="text/javascript" src="http://cdn.bootcss.com/jquery/1.8.3/jquery.min.js"></script>
    <script src="../lib/highmap/highcharts.js"></script>
    <script src="../lib/highmap/modules/map.js"></script>
    <script src="../lib/highmap/modules/data.js"></script>
    <script src="../lib/highmap/modules/exporting.js"></script>
    <!--地图数据-->
    <script type="text/javascript" src="../lib/highmap/cn-china-by-peng8.js"></script>
    <script>
        $(function(){
            //地图数据
            var data = Highcharts.geojson(Highcharts.maps['countries/cn/custom/cn-all-china']);
            //配置结构
            var options={
                mapNavigation: {
                    enabled: true,
                    buttonOptions: {
                        verticalAlign: 'bottom'//放大放小的按钮
                    }
                },
                series : [
                    {
                        data : data,
                        name: '中国'
                    },
                    {//地图上的标记点
                        type: 'mappoint',
                        name: 'Cities',
                        color: 'black',
                        data:[
                            {
                                name: 'London',
                                lat: 39,
                                lon: 115
                            },
                        ]
                    }
                ],
            };
            //渲染地图
            $('#container').highcharts('Map',options);
        })
    </script>
</head>
<body>
    <div id="container" style="height: 500px; min-width: 310px; max-width: 800px; margin: 0 auto"></div>
    <a href="http://www.highcharts.com/maps/demo/mappoint-latlon">官网例子</a>
</body>
</html>